<template>
    <div class="warpper-box">
      <div class="inner_box">
       <form-create 
       v-model="params.fApi" 
       :rule="params.rule" 
       :option="params.option" 
       @btn-search-click="loadList(true)" />
      <system-list
       :key="keys"
       :tableData="tables.tableData" 
       :tableLabel="tables.tableLabel" 
       :models="tables" 
       @on-search-click="loadList"
       @on-config-click="config"
       />
      <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
        <el-steps align-center :active="nodeActive" style="padding-bottom: 20px;border-bottom: 1px solid #f0f0f0;margin-bottom: 20px;">
          <el-step title="基本信息"></el-step>
          <el-step title="状态定义"></el-step>
          <el-step title="流转设置"></el-step>
        </el-steps>
        <template v-if="nodeActive===1">
          <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="form.visible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="onFormSubmit(2)">保存&下一步</el-button>
          </div>
        </template>
        <template v-if="nodeActive===2">
          <table class="custom-table">
            <thead>
              <tr>
                <th v-for="(item,index) in nodeTables.tableLabel" :key="index">{{item.label}}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in nodeTables.tableData" :key="index">
                <td style="width: 20%;">{{item.name}}</td>
                <td style="width: 60%;">{{item.stepName}}</td>
                <td style="width: 10%;">{{item.startFlag}}</td>
                <td style="width: 10%;">{{item.endFlag}}</td>
              </tr>
            </tbody>
          </table>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="form.visible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="onFormSubmit(3)">保存&下一步</el-button>
          </div>
        </template>
        <template v-if="nodeActive===3">
          <!--工作柳流转设置，是设置工作流各状态间的先后流转关系。如果需要设置该流转，请在两个状态间的复选框内打勾。-->
          <el-divider content-position="left">点击图标<i style="color: #409EFF;" class="el-icon-s-custom"></i>设置流转用户授权</el-divider>
          <table class="custom-table">
            <thead>
              <tr>
                <th v-for="(item,index) in nodeTables.tableLabel2" :key="index">{{item.label}}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in nodeTables.tableData2" :key="index">
                <td >【{{item.name}}】可流转到</td>
                <td v-for="(items,index) in item.changeList" :key="index">
                  <el-checkbox v-model="items.checked === '1'?true:false" :disabled="true"></el-checkbox>
                  <el-button @click="setUser(item.id,items.toId)" v-if="items.checked==='1'" style="margin-left: 6px;" type="text" size="medium" icon="el-icon-s-custom"></el-button>
                </td>
              </tr>
            </tbody>
          </table>
          <el-dialog
            width="800px"
            title="配置人员"
            :visible.sync="userVisible"
            append-to-body>
            <el-divider content-position="left">角色</el-divider>
            <el-checkbox-group v-model="roleCheckbox" size="small">
              <el-checkbox v-for="(items,index) in roleList" :key="index" :label="items.id" border>{{items.name}}</el-checkbox>
            </el-checkbox-group>
            <el-divider content-position="left">人员</el-divider>
            <el-checkbox-group v-model="userCheckbox" size="small">
              <el-checkbox v-for="(items,index) in userList" :key="index" :label="items.id" border>{{items.name}}</el-checkbox>
            </el-checkbox-group>
            <div slot="footer" class="dialog-footer">
              <el-button size="mini" @click="userVisible = false">取 消</el-button>
              <el-button size="mini" type="primary" @click="onUserSubmit">保存</el-button>
            </div>
          </el-dialog>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="form.visible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="onFormSubmit(4)">保存</el-button>
          </div>
        </template>
      </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { 
    PARAMS_NODE,
    NODE_FORM,
    NODE_LABEL,
    NODE_SET_LABEL,
    NODE_SET_LABEL2,
    OPTION_INLINE,
    OPTION_BLOCK
  } from "./systemUser/system_form"
  import SystemList from "./systemUser/system_list"
  import { getNodeList,saveNode,getNodeStatus,getAllNode,saveAllNode,saveAllUserRole} from "@/api/system_api"
  import store from '@/store'
  export default {
    components:{
      SystemList
    },
    data() {
      return {
        keys:1,
        params:{
          fApi:{},
          rule:PARAMS_NODE,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          width:'100',
          tableData:[],
          tableLabel: NODE_LABEL
        },
        form:{
          id:'',
          title:'配置工作流',
          width:"1000px",
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        objId:'',
        nodeActive:1,
        nodeTables:{
          tableData:[],
          tableData2:[],
          tableLabel: NODE_SET_LABEL,
          tableLabel2: NODE_SET_LABEL2
        },
        page:{
          pageNum:1,
          pageSize:100,
        },
        userVisible:false,
        roleCheckbox:[],//选中角色
        userCheckbox:[],//选中用户
        roleList:[],//角色列表
        userList:[],//用户列表
        checkId:'',//根据id匹配父节点
        checktoId:'',//根据id匹配子节点
      };
    },
    mounted() {
      this.loadList(true);
    },
    methods: {
      async loadList(formData) {
        let params = this.params.fApi.bind();
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.pageNum;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const req = await getNodeList(params);
        if(req.code === 200){
          this.tables.tableData = req.data.list;
          this.tables.tableData.forEach(v=>{
            v.config=true
          })
          this.tables.total = req.data.total;
        }
      },
      config(row){
        this.form.rule = NODE_FORM;
        this.$nextTick(()=>{
          this.form.fApi.setValue({"name":row.name,"remarks":row.remarks})
        });
        this.objId = row.id;
        this.nodeActive = 1;
        this.form.visible = true;
      },
      async onFormSubmit(val) {
        if(val === 2){
          this.form.fApi.submit(async (formData, $f) => {
            try {
              formData.id = this.objId;
              const req = await saveNode(formData);
              if(req.code === 200){
                this.getNode(val,'tableData');
              }
            } catch (error) {
              //this.$message.info(JSON.stringify(error));
            }
          });
        }else if(val === 3){
          this.getNode(val,'tableData2');
        }else if(val === 4){
          let params = {
            vos:this.nodeTables.tableData2,
            jobId:this.objId
          }
          let req = await saveAllNode(params,this.objId);
          if(req.code === 200){
            this.$message.success('配置成功！');
            this.form.visible = false;
          }
        }
      },
      async getNode(val,typeData){
        const req = val === 2 ? await getNodeStatus(this.objId) : await getAllNode(this.objId);
        if(req.code === 200){
           if(typeData === 'tableData2'){
            req.data.forEach((v,index)=>{
              v.changeList.forEach(el=>{
                el.checked = '0';
              })
              var params = {};
              params.actionCode = "";
              params.checked = '1';
              params.fromId = parseInt(index+1);
              params.jobId = this.objId;
              params.roleIds = "";
              params.toId = v.id;
              params.userIds = "";
              v.changeList.splice(index,0,params)
            })
            this.nodeTables[typeData] = req.data;
           }else{
            this.nodeTables[typeData] = req.data;
           }
          this.nodeActive = val;
        }
      },
      async setUser(id,toId){
        this.roleCheckbox = [];
        this.userCheckbox = [];
        this.roleList = await store.dispatch('user/getAllRole');
        this.userList = await store.dispatch('user/getAllUser');
        this.checkId = id;
        this.checktoId = toId;
        this.userVisible = true;
      },
      onUserSubmit(){
        if(this.roleCheckbox.length === 0 && this.userCheckbox.length === 0){
          return this.$message.error('最少要配置一个数据');
        }
        this.nodeTables.tableData2.forEach(v=>{
          if(v.id === this.checkId){
            v.changeList.forEach(element=>{
              if(element.toId === this.checktoId){
                if(this.roleCheckbox.length !==0){
                  element.roleIds = this.roleCheckbox.join(',')
                }
                if(this.userCheckbox.length !==0){
                  element.userIds = this.userCheckbox.join(',')
                }
              }
            })
          }
        })
        this.userVisible = false;
      }
   
    }
  };
  </script>
